<template>
	<div>
		<!-- <Header /> -->
		<div class="home_page mobile_layer">
			<!-- v-loading="!webSocketStatus" element-loading-background="rgba(0, 0, 0, 0.8)" -->
			<div class="tips_box" :style="`--top: ${scrollPosition}px`">
				<div class="tips_item" v-for="(item,index) in showTips" :key="item.uid">
					<img
						:src="require(`@/assets/images/home/${item.type == 1 ? 'success' : item.type == 3 ? 'warning' : 'error'}.png`)" />
					<p v-if="item.type == 4"> {{ item.msg }} </p>
					<p v-else>
						{{item.type == 1 ? $t('home.betSuccess') : item.type == 2 ? $t('home.frequent') : item.type == 3 ? $t('home.trading') : $t('home.binary') }}
					</p>
					<i class="el-icon-close" @click="handleDel(item)" />
				</div>
			</div>
			<!-- <div @click="addTips()">111</div> -->
			<div :style="`${routerName == 'bettingRecord' ? 'height: 100vh; overflow: hidden;' : ''}`">
				<HomeTitle />
				<!-- <EchartsCom /> -->
				<!-- <KechartNew /> -->
				<KechartN />
				<UpDown />
				<TableCom />
			</div>
			<router-view></router-view>
		</div>
		<!-- <div class="loading_box" v-show="!webSocketStatus && routerName == '/mobile/home' && pageStatus" @touchmove.stop.prevent>
			<div class="loading_icon">
				<img src="@/assets/images/home/loading.gif" />
			</div>
		</div> -->
	</div>
</template>

<script>
	import Cookie from 'vue-cookies'
	import HomeTitle from './components/homeTitle.vue'
	// import EchartsCom from './components/Kechart.vue'
	// import KechartNew from './components/KechartNew.vue'
	// import KechartN from './components/KechartN.vue'
	import UpDown from './components/upDown.vue'
	// import TableCom from './components/table/index.vue'
	export default {
		name: 'HomePage',
		components: {
			HomeTitle,
			// EchartsCom,
			// KechartNew,
			KechartN: () => import('./components/KechartN.vue'),
			UpDown,
			TableCom: () => import('./components/table/index.vue')
		},
		data() {
			return {
				showBalance: true,
				isIos: false,
				pageStatus: false,
				scrollPosition: 0,
				topDom: undefined,
			}
		},
		computed: {
			webSocketStatus() {
				return this.$store.state.webSocketStatus
			},
			showTips() {
				return this.$store.state.showTips
			},
			routerName() {
				return this.$route.name
			}
		},
		watch: {},
		mounted() {
			this.pageStatus = true;
			// console.log('window.top', window.top);
			// this.topDom = window.top && window.top[1] ? window.top[1].document.getElementsByClassName('main')[0] : window.top
			// 	.document
			// 	.getElementsByClassName('main')[0]
			// console.log('this.topDom', this.topDom, window.top[1].document.getElementsByClassName('main'));
			// // 内嵌页面获取滚动距离
			// if (this.topDom) {
			// 	this.topDom.addEventListener('scroll', this.handleScroll);
			// } else {
			// 	window.addEventListener('scroll', this.handleScroll);
			// }
			// console.log('window.top.document', window.top.document, this.topDom);
			// this.isIos = this.isIOSFun()
			// console.log('isIos', this.isIos);
		},
		beforeDestroy() {
			// 移除滚动事件监听
			window.removeEventListener('scroll', this.handleScroll);
		},
		methods: {
			// isIOSFun() {
			// 	const userAgent = navigator.userAgent || navigator.vendor || window.opera;
			// 	return /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;
			// },
			handleScroll() {
				if (this.topDom) {
					this.scrollPosition = this.topDom.pageYOffset || this.topDom.scrollTop;
				} else {
					this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
				}
				// console.log('this.scrollPosition', this.scrollPosition);
			},
			handleDel(item) {
				this.$store.commit('closeTips', item.uid)
			},
			addTips() {
				this.$store.commit('onChangeTips', 1)
			}
		}
	}
</script>
<style lang="less" scoped>
	// .fixed {
	// 	position: fixed;
	// 	top: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	overflow: hidden;
	// }

	.home_page {
		position: relative;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		padding-bottom: 10px;

		// overflow: hidden;
		.tips_box {
			position: absolute;
			right: 20px;
			top: calc(55px + var(--top));
			// transform: translateX(-50%);
			height: auto;
			z-index: 2008;
			transition: all .1s linear;

			.tips_item {
				padding: 10px;
				background-color: rgba(0, 0, 0, .7);
				border-radius: 6px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 14px;
				color: #fff;
				margin-bottom: 10px;
				animation: hideTips 3.5s linear 1;
				animation-fill-mode: forwards;

				img {
					width: 24px;
					height: 24px;
					margin-right: 9px;
				}

				i {
					font-size: 14px;
					color: #fff;
					margin-left: 15px;
				}
			}

			@keyframes hideTips {

				0% {
					transform: translateX(120%);
				}

				10% {
					transform: translateX(0);
				}

				90% {
					transform: translateX(0);
				}

				100% {
					transform: translateX(120%);
				}
			}

		}
	}

	.loading_box {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 999;

		.loading_icon {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 80%;

			img {
				width: 100%;
			}
		}
	}
</style>